import React, { Component } from 'react';
import { user_register } from '../utils/api'
import './Register.scss'
import { Toast } from 'antd-mobile'
import { debounce } from '../utils/tools'

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            pwd: '',
            checkpwd: ''
        }

    }

    handleChange(e) {
        this.setState({
            // phone: e.target.value
            [e.target.name]: ((e.target.value == 'checkbox' || e.target.value == 'radio') ? e.target.checked : e.target.value)
        })
    }

    // 点击注册按钮先判断账号密码是否合法，如果合法进行请求，请求成功就注册成功请求失败即注册失败
    register() {
        if (/^1[3-9]\d{9}$/.test(this.state.phone) == false) {
            Toast.show({
                icon: 'fail',
                content: '请输入合法的手机号!',
            })
        } else if (!this.state.pwd || !this.state.checkpwd) {
            Toast.show({
                icon: 'fail',
                content: '请输入密码/确认密码!',
            })
        } else {//验证通过
            console.log();
            user_register({ phone: this.state.phone, pass: this.state.pwd }).then((res) => {
                if (res.data.code == 200) {
                    Toast.show({
                        icon: 'success',
                        content: '注册成功',
                    })
                    // 注册成功后可以跳转到登录页
                } else {
                    Toast.show({
                        icon: 'fail',
                        content: '注册失败',
                    })
                }
            })
        }
    }

    // 点击登录按钮跳往登录页
    login() {
        this.props.history.push({ pathname: '/login' });
    }

    render() {
        return (
            <div className='login' style={{ backgroundImage: "url(" + require("../bg.webp") + ")" }}>
                {/* 将非受控元素变成受控元素，通过value和onChange绑定实现 */}
                {/* value绑定，将组件状态绑定到元素的value属性 */}
                {/* onChange绑定，当元素的值发生改变时更新元素的值到组件状态 */}
                <div className="title">
                    <h2>注 册 页</h2>
                </div>
                <div className="block">
                    <input type="text" name='phone' placeholder='请输入手机号' value={this.state.phone} onChange={(e) => {
                        this.handleChange(e)
                    }} />
                </div>
                <div className="block">
                    <input type="password" name='pwd' placeholder='请输入密码' value={this.state.pwd} onChange={(e) => {
                        this.handleChange(e)
                    }} />
                </div>
                <div className="block">
                    <input type="password" name='checkpwd' placeholder='请再次输入密码' value={this.state.checkpwd} onChange={(e) => {
                        this.handleChange(e)
                    }} />
                </div>
                <div className="block1">
                    <input type="button" value="注册" onClick={() => { this.register() }} />
                    <span onClick={() => { debounce(this.login()) }}>登录</span>
                </div>
            </div>
        );
    }
}

export default Register;